<!DOCTYPE html>

<html>



	<head>

		<meta charset="UTF-8">

		<title>京东登录页</title>

		<style type="text/css">

			* {

				margin: 0;

				padding: 0;

			}

			footer p {

				font-size: 14px;

				color: #666;

				text-align: center;

				line-height: 30px;

			}

			

			a {

				text-decoration: none;

				color: #666;

			}

			

			a:hover {

				text-decoration: underline;

				color: #f00;

			}

			

			header p {

				color: #666;

				font-size: 22px;

				float: left;

				height: 60px;

				line-height: 60px;

				padding-left: 20px;

			}

			

			header p:nth-of-type(1) {

				margin-left: 120px;

			}

			

			header:after {

				content: '';

				display: block;

				clear: both;

			}

			

			div section .content{

				background-image: url(banner.png);

				background-repeat: no-repeat;

				background-size: 1350px;

			}

			div section .content .wrap{

				width: 990px;

				height: 475px;

				margin: 10px 0 20px;

			}

			.content .wrap .login-box .login-form{

				background-color: #FFF;

				width: 290px;

				height: 286px;

				float: right;

				margin-right: -148px;

				margin-top: 130px;

			}

			.content .wrap .login-box .login-form h2{

				font-size: 16px;

				padding-top:20px ;

				padding-left: 20px;

			}

			.content .wrap .login-box .login-form h2 a{

				font-size: 16px;

				float: right;

				line-height: 16px;

				color: red;

				padding-right: 20px;

				padding-left: 32px;

				background-image: url(icon5.jpg);

				background-repeat: no-repeat;

				background-position-x: 10px;			

			}

			.content .wrap .login-box .login-form form{

				display: inline-block;

				font-size: 12px;

				line-height: 58px;

				margin: 10px 20px;

				height: 28px;

			}

			.content .wrap .login-box .login-form form p:nth-of-type(1){

				padding-left: 38px;								

				background-image: url(icon1.jpg);

				background-repeat: no-repeat;

				background-position-y: 10px;

			}

			.content .wrap .login-box .login-form form p:nth-of-type(2){

				padding-left: 38px;								

				background-image: url(icon2.jpg);

				background-repeat: no-repeat;

				background-position-y: 10px;

			}

			.content .wrap .login-box .login-form form p:nth-of-type(3) a{

				float: right;

			}							

		</style>

	</head>



	<body>

		<div>

			<header>

				<p>

					<a href="#"><img src="../img/banner.png"alt ="" width="170" height="60" /></a>

				</p>

				<p>欢迎登录</p>

			</header>

			<section>

				<article class="content">

					<div class="wrap">

						<div class="login-box">

							<div class="login-form">

								<h2>京东会员<a href="#">立即注册</a></h2>

								<form action="#" method="post">

									<p><input type="text" placeholder="邮箱/用户名/已验证手机" style="height: 30px; width: 200px;"/></p>

									<p><input type="password" style="height: 30px;width: 200px;"/></p>

									<p>

										<input type="checkbox" />自动登录

										<a href="#">忘记密码？</a>

									</p>

									<p><input type="submit" value="登录" style="width: 200px; height: 30px; background-color: #E4393C; margin-left: 28px;"/></p>									

								</form>

							</div>

						</div>

					</div>

				</article>

			</section>

			<footer>

				<p>

					<a href="#">关于我们</a>

					<span>|</span>

					<a href="#">联系我们</a>

					<span>|</span>

					<a href="#">人才招聘</a>

					<span>|</span>

					<a href="#">商家入驻</a>

					<span>|</span>

					<a href="#">广告服务</a>

					<span>|</span>

					<a href="#">手机京东</a>

					<span>|</span>

					<a href="#">友情链接</a>

					<span>|</span>

					<a href="#">销售联盟</a>

					<span>|</span>

					<a href="#">京东社区</a>

					<span>|</span>

					<a href="#">京东公益</a>

					<span>|</span>

					<a href="#">English&nbsp;Site</a>

				</p>

				<p>Copyright&copy;2004-2017 京东JD.com 版权所有</p>

			</footer>

		</div>

	</body>



</html>


